*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
}
body{
	background: #fefdfb;
	background-size: cover;
	color: #c98518;
}
.progress{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	background: #fffefc; 
}
.progress .percent{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #c98518;
    font-size: 1.5rem;
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
}
.audio{
	display: none;
	position: absolute;
	z-index: 100;
	right: 20px;
	top: 20px;
	width: 52px;
	height: 52px;
	background-image: url(../img/audio.png);
	background-position: -52px 0;
}
.audio.on{
	background-position: 0 0;
	animation: rotate 1.5s linear infinite;
	-webkit-animation: rotate 1.5s linear infinite;
}
.container{
	position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 640px;
    margin-left: -320px;
    overflow: hidden;
}
.pages,
.page{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}
.page{
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.cover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center;
	background-size: cover;
}
.txt{
	position: absolute;
	top: 8%;
	left: 8%;
	z-index: 2;
}
.txt > div{
	margin-bottom: 25px;
	background-image: url(../img/txt-sprite.png);
}
.group{
	position: absolute;
}
.group > div{
	background: url(../img/e-sprite.png) no-repeat;
}
.p4 .group > div,
.p5 .group > div,
.p6 .group > div,
.p8 .group > div{
	position: absolute;
}

.p1 .group{right: 0; bottom: 0;}
.p3 .group{left: 50%; top: 50%; margin-top: -220px; margin-left: 70px;}
.p4 .group{left: 0; right: 0; bottom: 0; top: 8%; margin-top: 187px;}
.p5 .group{left: 0; right: 0; bottom: 0; top: 8%; margin-top: 161px;}
.p6 .group{left: 0; right: 0; bottom: 0; top: 8%; margin-top: 324px;}
.p8 .group{left: 0; right: 0; bottom: 0; top: 8%; margin-top: 356px;}

.p1 .cover{background-image: url(../img/bg1.jpg);}
.p2 .cover{background-image: url(../img/bg2.jpg);}
.p3 .cover{background-image: url(../img/bg3.jpg);}
.p4 .cover{background-image: url(../img/bg4.jpg);}
.p5 .cover{background: #fffefc;}
.p6 .cover{background: #fffefc;}
.p7 .cover{background-image: url(../img/bg7.jpg);}
.p8 .cover{background-image: url(../img/bg8.jpg);}
.p9 .cover{background-image: url(../img/bg9.jpg);}

.p1 .txt .t1{width: 254px; height: 83px; background-position: -2265px -103px;}
.p1 .txt .t2{width: 260px; height: 120px; background-position: -1345px -123px;}
.p1 .txt .t3{width: 256px; height: 78px; background-position: -357px -164px;}
.p2 .txt .t1{width: 305px; height: 121px; background-position: -1345px 0;}
.p2 .txt .t2{width: 303px; height: 143px; background-position: -666px 0;}
.p2 .txt .t3{width: 298px; height: 24px; background-position: -1965px -194px;}
.p3 .txt .t1{width: 272px; height: 102px; background-position: -1652px 0;}
.p3 .txt .t2{width: 267px; height: 77px; background-position: -2521px -165px;}
.p3 .txt .t3{width: 228px; height: 23px; background-position: -1965px -220px;}
.p4 .txt .t1{width: 307px; height: 162px; background-position: -357px 0;}
.p5 .txt .t1{width: 372px; height: 136px; background-position: -971px 0;}
.p6 .txt .t1{width: 355px; height: 173px; background-position: 0 0;}
.p6 .txt .t2{width: 344px; height: 101px; background-position: -1926px 0;}
.p7 .txt .t1{width: 298px; height: 89px; background-position: -1965px -103px;}
.p7 .txt .t2{width: 300px; height: 91px; background-position: -666px -145px;}
.p7 .txt .t3{width: 228px; height: 70px; background-position: 0 -175px;}
.p8 .txt .t1{width: 356px; height: 83px; background-position: -2272px 0;}
.p8 .txt .t2{width: 356px; height: 120px; background-position: -1607px -123px;}
.p8 .txt .t3{width: 229px; height: 78px; background-position: -2521px -85px;}
.p9 .txt .t1{width: 148px; height: 73px; background-position: -2630px 0;}
.p9 .txt .t2{width: 360px; height: 106px; background-position: -971px -138px;}


.p1 .group .e1{width: 295px; height: 682px; background-position: 0 0;}
.p3 .group .e1{width: 204px; height: 250px; background-position: -2374px 0;}

.p4 .group .e1{width: 500px; height: 469px; background-position: -1230px 0; left: 20px;	bottom: 130px; z-index: 2;}
.p4 .group .e2{width: 342px; height: 359px; background-position: -1732px -374px; right: 0; bottom: 20px; z-index: 3;}
.p4 .group .e3{width: 640px; height: 279px; background-position: -1049px -502px; bottom: 0;}
.p4 .group .e4{width: 243px; height: 242px; background-position: -2718px -250px; top: 0; right: 65px;}
.p4 .group .e5{width: 162px; height: 71px; background-position: -1863px -735px; right: 40px; bottom: 315px; z-index: 5;}
.p4 .group .e6{width: 160px; height: 82px; background-position: 0 -684px; left: 208px; bottom: 452px; z-index: 5;}
.p4 .group .e7{width: 170px; height: 78px; background-position: -1691px -735px; left: 72px; bottom: 264px; z-index: 5;}

.p5 .group .e1{width: 640px; height: 372px; background-position: -1732px 0; bottom: 0;}
.p5 .group .e2{width: 504px; height: 236px; background-position: -297px -590px; top: -50px; left: 50%; margin-left: -300px; zoom: 0.9;}
.p5 .group .e3{width: 596px; height: 588px; background-position: -297px 0; bottom: 0; left: 50%; margin-left: -298px;}

.p6 .group .e1{width: 640px; height: 256px; background-position: -2076px -374px; bottom: 0;}
.p6 .group .e2{width: 355px; height: 248px; background-position: -2580px 0; left: 120px; bottom: 330px;}
.p6 .group .e3{width: 333px; height: 500px; background-position: -895px 0; left: 210px; bottom: 80px;}
.p6 .group .e4{width: 151px; height: 164px; background-position: -2076px -632px; right: 80px; bottom: 80px;}
.p6 .group .e5{width: 152px; height: 291px; background-position: -895px -502px; left: 80px; bottom: 120px;}

.p8 .group .e1{width: 217px; height: 18px; background-position: 0 -768px; bottom: 25px; right: 50px;}
.p8 .group .e2{width: 550px; height: 70px; background-position: -2229px -632px; bottom: 170px; left: 50%; margin-left: -275px;}
.p8 .group .e3{width: 550px; height: 70px; background-position: -2229px -704px; bottom: 170px; left: 50%; margin-left: -275px; margin-bottom: 100px;}


.p9 .txt{
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.p9 .txt > div{
	position: absolute;
	left: 50%;
	top: 50%;
}
.p9 .txt .qrcode{
	margin-left: -158px;
	margin-top: -336px;
	width: 316px;
	height: 316px;
	padding: 18px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.p9 .txt .t1{
	margin-top: 10px;
	margin-left: -74px;
}
.p9 .txt .t2{
	margin-top: 240px;
	margin-left: -180px;
}

.next{
	position: absolute;
	width: 42px;
	height: 23px;
	left: 50%;
	bottom: 5%;
	margin-left: -21px;
	background: url(../img/next.png) no-repeat;
}
.play{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: 70px;
	margin-left: -44px;
}
.play span{
	position: relative;
	z-index: 2;
	display: block;
	font-size: 20px;
	color: #c98518;
	width: 88px;
	height: 88px;
	background: #fff;
	border-radius: 100%;
	text-align: center;
	line-height: 102px;
	background: url(../img/player.png)  no-repeat;
}
.play:after{
	position: absolute;
	content: '';
	display: block;
	top: 50%;
	left: 50%;
	margin-left: -68px;
	margin-top: -68px;
	width: 136px;
	height: 136px;
	background: #fff;
	border-radius: 100%;
}
.link{
	display: block;
	height: 100%;
	text-indent: -9999px;
}

.frame{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	display: none;
}
.frame .close{
	position: absolute;
	z-index: 9999;
	left: 20px;
	top: 20px;
	padding: 10px 15px;
	font-size: 24px;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid #fff;
	border-radius: 5px;
}
.frame .close b{
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	font-family: arial;
	margin-right: 5px;
	font-weight: normal;
	font-size: 30px;
}
/*animation*/
@keyframes rotate{
	from{transform: rotate(0); transform-origin: center;}
	to{transform: rotate(360deg); transform-origin: center;}
}
@-webkit-keyframes rotate{
	from{-webkit-transform: rotate(0); -webkit-transform-origin: center;}
	to{-webkit-transform: rotate(360deg); -webkit-transform-origin: center;}
}
@keyframes scaleIn{
	from{ opacity: 0; transform: scale(1.3); transform-origin: center; }
	to{ opacity: 1;  transform: scale(1); transform-origin: center; }
}
@-webkit-keyframes scaleIn{
	from{ opacity: 0; -webkit-transform: scale(1.3); -webkit-transform-origin: center; }
	to{ opacity: 1; -webkit-transform: scale(1); -webkit-transform-origin: center; }
}
@keyframes start {
    from { opacity: 1; }
    to { opacity: 0; transform: translate3d(0,15px,0); }
}
@-webkit-keyframes start {
    from { opacity: 1; -webkit-transform: translate3d(0,0,0); }
    to { opacity: 0; -webkit-transform: translate3d(0,15px,0); }
}
@keyframes pulse {
  0% { transform: scale(0); opacity: 0.0; }
  25% { transform: scale(0); opacity: 0.1; }
  50% { transform: scale(0.1); opacity: 0.5; }
  75% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1); opacity: 0.0; }
}
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(0); opacity: 0.0; }
  25% { -webkit-transform: scale(0); opacity: 0.1; }
  50% { -webkit-transform: scale(0.1); opacity: 0.5; }
  75% { -webkit-transform: scale(0.5); opacity: 1; }
  100% { -webkit-transform: scale(1); opacity: 0.0; }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.play:after{
	animation: pulse 2s ease-out infinite;
	-webkit-animation: pulse 2s ease-out infinite;
}
.next{
	animation: start 1s infinite;
	-webkit-animation: start 1s infinite;
}

.current .txt .t1{
	animation: scaleIn 2s 2.2s both;
	-webkit-animation: scaleIn 2s 2.2s both;
}
.current .txt .t2{
	animation: scaleIn 2s 2.8s both;
	-webkit-animation: scaleIn 2s 2.8s both;
}
.current .txt .t3{
	animation: scaleIn 2s 3.4s both;
	-webkit-animation: scaleIn 2s 3.4s both;
}

.current .cover{
	animation: scaleIn 2s both;
	-webkit-animation: scaleIn 2s both;
}

.p1.current .e1{
	animation: fadeInRight 2s 1.6s both;
	-webkit-animation: fadeInRight 2s 1.6s both;
}

.p2.current .play{
	animation: zoomIn 2s 1.6s both;
	-webkit-animation: zoomIn 2s 1.6s both;
}

.p3.current .e1{
	animation: fadeInRight 2s 1.6s both;
	-webkit-animation: fadeInRight 2s 1.6s both;
}

.p4.current .e1{
	animation: fadeInLeft 2s 1.6s both;
	-webkit-animation: fadeInLeft 2s 1.6s both;
}
.p4.current .e2{
	animation: fadeInRight 2s 2.5s both;
	-webkit-animation: fadeInRight 2s 2.5s both;
}
.p4.current .e3{
	animation: fadeInUp 2s both;
	-webkit-animation: fadeInUp 2s both;
}
.p4.current .e4{
	animation: fadeInRight 2s 2s both;
	-webkit-animation: fadeInRight 2s 2s both;
}
.p4.current .e5{
	animation: zoomIn 2s 4.3s both;
	-webkit-animation: zoomIn 2s 4.3s both;
}
.p4.current .e6{
	animation: zoomIn 2s 3.5s both;
	-webkit-animation: zoomIn 2s 3.5s both;
}
.p4.current .e7{
	animation: zoomIn 2s 4s both;
	-webkit-animation: zoomIn 2s 4s both;
}
.p4.current .txt .t1{
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
}


.p5.current .e1{
	animation: fadeInUp 2s both;
	-webkit-animation: fadeInUp 2s both;
}
.p5.current .e2{
	animation: fadeInLeft 2s 2.5s both;
	-webkit-animation: fadeInLeft 2s 2.5s both;
}
.p5.current .e3{
	animation: fadeInRight 2s 1.6s both;
	-webkit-animation: fadeInRight 2s 1.6s both;
}
.p5.current .txt .t1{
	animation-delay: 2.8s;
	-webkit-animation-delay: 2.8s;
}


.p6.current .e1{
	animation: fadeInUp 2s both;
	-webkit-animation: fadeInUp 2s both;
}
.p6.current .e2{
	animation: fadeInRight 2s 2.5s both;
	-webkit-animation: fadeInRight 2s 2.5s both;
}
.p6.current .e3{
	animation: fadeInLeft 2s 1.6s both;
	-webkit-animation: fadeInLeft 2s 1.6s both;
}
.p6.current .e4{
	animation: fadeInRight 2s 3.5s both;
	-webkit-animation: fadeInRight 2s 3.5s both;
}
.p6.current .e5{
	animation: fadeInLeft 2s 3s both;
	-webkit-animation: fadeInLeft 2s 3s both;
}
.p6.current .txt .t1{
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
.p6.current .txt .t2{
	animation-delay: 4.6s;
	-webkit-animation-delay: 4.6s;
}

.p7.current .txt .t1{
	animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s;
}
.p7.current .txt .t2{
	animation-delay: 2.2s;
	-webkit-animation-delay: 2.2s;
}
.p7.current .txt .t3{
	animation-delay: 2.8s;
	-webkit-animation-delay: 2.8s;
}

.p8.current .e2{
	animation: fadeInUp 2s 2.5s both;
	-webkit-animation: fadeInUp 2s 2.5s both;
}
.p8.current .e3{
	animation: fadeInUp 2s 1.6s both;
	-webkit-animation: fadeInUp 2s 1.6s both;
}

.p9.current .txt .t1{
	animation-delay: 2.2s;
	-webkit-animation-delay: 2.2s;
}
.p9.current .txt .t2{
	animation-delay: 2.8s;
	-webkit-animation-delay: 2.8s;
}
.p9.current .txt .qrcode{
	animation: scaleIn 2s 1.6s both;
	-webkit-animation: scaleIn 2s 1.6s both;
}